/* 导航栏固定样式 */
navigation-bar {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999 !important;
}

/* 主容器样式 */
.tactics-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 30rpx;
  padding-top: 180rpx; /* 增加上边距，确保有足够空间容纳固定导航栏 */
  background-image: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);

  // 全局样式变量
  --primary-color: #ff6b35;
  --primary-light: #fff3e0;
  --secondary-color: #666;
  --text-color: #333;
  --light-gray: #f5f5f5;
  --border-radius: 20rpx;
  --shadow-light: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 12rpx 36rpx rgba(0, 0, 0, 0.12);

  // 页面头部内容 - 运动风格设计
  .page-content-header {
    position: relative;
    margin-bottom: 30rpx;
    border-radius: 0; // 保留不要圆角的设置
    overflow: hidden;
    min-height: 300rpx;
    box-shadow: var(--shadow-light);
    background-color: #fff;

    // 背景装饰层
    .header-decoration {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      overflow: hidden;

      .header-bg {
        width: 100%;
        height: 100%;
        opacity: 1; // 完全不透明，显示原图效果
        filter: none; // 不应用任何滤镜效果
      }

      .header-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent; // 完全透明，不遮挡背景图
      }
    }

    // 内容层
    .header-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60rpx 30rpx;
      text-align: center;

      .header-icon {
        width: 96rpx;
        height: 96rpx;
        margin-bottom: 20rpx;
        background-color: white;
        border-radius: 50%;
        padding: 15rpx;
        box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.2);
        animation: pulse 2s ease-in-out infinite;
      }

      .header-main-title {
        font-size: 44rpx;
        font-weight: bold;
        color: #e65c30;
        margin-bottom: 15rpx;
        text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
        letter-spacing: 2rpx;
      }

      .header-subtitle {
        font-size: 28rpx;
        color: var(--secondary-color); /* 深灰色 */
        line-height: 1.4;
        text-align: center;
        margin: 0;
      }
    }
  }

  // 学习进度条样式
  .learning-progress {
    padding: 0 30rpx 20rpx;

    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;

      .progress-title {
        font-size: 28rpx;
        font-weight: 600;
        color: var(--text-color);
      }

      .progress-percentage {
        font-size: 28rpx;
        font-weight: bold;
        color: var(--primary-color);
      }
    }

    .progress-bar {
      height: 12rpx;
      background-color: #f0f0f0;
      border-radius: 6rpx;
      overflow: hidden;
      box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);

      .progress-fill {
        height: 100%;
        background: linear-gradient(
          90deg,
          var(--primary-color) 0%,
          #ff8c42 100%
        );
        border-radius: 6rpx;
        transition: width 0.5s ease;
      }
    }

    .progress-info {
      display: block;
      margin-top: 10rpx;
      font-size: 24rpx;
      color: var(--secondary-color);
    }
  }

  // 搜索框样式 - 优化版
  .search-container {
    padding: 0 30rpx 30rpx;

    .search-bar {
      display: flex;
      align-items: center;
      background-color: #f8f8f8;
      border-radius: 60rpx; // 更圆润的边角
      padding: 20rpx 30rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06); // 更精致的阴影
      transition: all 0.3s ease; // 添加过渡效果

      &:active {
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); // 点击时阴影加深
      }

      .search-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
      }

      .search-icon {
        opacity: 0.5;
        transition: opacity 0.3s ease;
      }

      .search-bar:focus-within .search-icon {
        opacity: 0.8; // 聚焦时图标更清晰
      }

      .search-placeholder {
        color: #c0c0c0;
        font-size: 28rpx;
      }

      .search-clear {
        width: 32rpx;
        height: 32rpx;
        background-image: url("/static/images/common/close.png");
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.7;
        transition: opacity 0.3s ease, transform 0.3s ease;
        margin-left: 10rpx;
        padding: 8rpx;
      }

      .search-clear-hover {
        opacity: 1;
        transform: scale(1.1); // 点击时轻微放大
      }

      .search-input {
        flex: 1;
        font-size: 28rpx;
        color: var(--text-color);
        line-height: 1.5;
        height: 60rpx;
        box-sizing: border-box;
        padding: 0;
        background: none;
        border: none;
      }

      .search-placeholder {
        color: #c0c0c0;
        font-size: 28rpx;
      }

      .search-clear {
        width: 32rpx;
        height: 32rpx;
        background-image: url("/static/images/common/close.png");
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.7;
        transition: opacity 0.3s ease, transform 0.3s ease;

        &:active {
          opacity: 1;
          transform: scale(1.1); // 点击时轻微放大
        }
      }
    }
  }

  // 头部浮动动画
  @keyframes headerFloat {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6rpx);
    }
    100% {
      transform: translateY(0);
    }
  }

  // 技能列表样式
  .skills-list {
    padding: 0 20rpx;

    .skill-category {
      margin-bottom: 40rpx;

      .category-header {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        padding: 0 10rpx;

        .category-title {
          font-size: 32rpx;
          font-weight: bold;
          color: var(--text-color);
          position: relative;

          &::after {
            content: "";
            position: absolute;
            bottom: -8rpx;
            left: 0;
            width: 60rpx;
            height: 6rpx;
            background-color: var(--primary-color);
            border-radius: 3rpx;
          }
        }

        .category-count {
          font-size: 24rpx;
          color: var(--secondary-color);
          margin-left: 15rpx;
        }
      }

      .skill-items-container {
        // 分类容器样式
        margin-bottom: 30rpx;
        padding: 0 20rpx;
      }
      
      // 技能卡片外部容器，确保卡片之间有足够间距
      .skill-card-wrapper {
        margin-bottom: 60rpx;
      }

      .skill-item {
        display: flex;
        align-items: center;
        background-color: white;
        border-radius: var(--border-radius);
        padding: 30rpx;
        margin-bottom: 60rpx;
        box-shadow: var(--shadow-light);
        transition: all 0.3s ease;
        border-left: 8rpx solid var(--primary-color);
        position: relative;
        overflow: hidden;

        // 增强悬浮感的装饰
        &:before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 240rpx;
          height: 240rpx;
          background: linear-gradient(
            135deg,
            rgba(255, 107, 53, 0.08) 0%,
            rgba(255, 107, 53, 0) 70%
          );
          z-index: 0;
        }
      }

      /* 展开状态的卡片样式 */
      .skill-item.expanded {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    &:active {
      transform: scale(0.98);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
    }

    .skill-icon {
      width: 150rpx;
      height: 150rpx;
      margin-right: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(
        135deg,
        var(--primary-light) 0%,
        #ffe0b2 100%
      );
      border-radius: 50%;
      z-index: 1;
      box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.15);
      animation: pulse 3s ease-in-out infinite;

      image {
        width: 100rpx;
        height: 100rpx;
        object-fit: contain;
        z-index: 2;
      }
    }

    .skill-info {
      flex: 1;
      z-index: 1;

      .skill-title {
        font-size: 36rpx;
        font-weight: bold;
        color: var(--text-color);
        margin-bottom: 10rpx;
        position: relative;
      }

      .skill-desc {
        font-size: 26rpx;
        color: var(--secondary-color);
        line-height: 1.5;
        margin-bottom: 15rpx;
      }

      .skill-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;

        .tag {
          font-size: 20rpx;
          color: var(--primary-color);
          background-color: var(--primary-light);
          padding: 4rpx 16rpx;
          border-radius: 16rpx;
        }
      }
    }

    .skill-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      z-index: 1;

      .show-detail-btn {
          background-color: var(--primary-color);
          color: white;
          font-size: 22rpx;
          padding: 8rpx 16rpx;
          border-radius: 16rpx;
          margin-bottom: 10rpx;
          box-shadow: 0 3rpx 12rpx rgba(255, 107, 53, 0.25);
          transition: all 0.2s ease;
          border: none;
          min-width: 80rpx;

          &:active {
            background-color: #ff8c42;
            transform: scale(0.95);
            box-shadow: 0 2rpx 6rpx rgba(255, 107, 53, 0.2);
          }
        }

        .quick-practice-btn {
        background-color: var(--primary-color);
        color: white;
        font-size: 24rpx;
        padding: 10rpx 24rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.3);
        transition: all 0.3s ease;

        &:active {
          background-color: #ff8c42;
          transform: scale(0.95);
          box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.2);
        }
      }

      .arrow-icon {
        margin-left: 10rpx;
        opacity: 0.7;
        transition: all 0.3s ease;

        &:active {
          transform: translateX(5rpx);
          opacity: 1;
        }
      }
    }
  }
}

// 详情弹窗样式
.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  padding: 40rpx;
  backdrop-filter: blur(10rpx);
  animation: fadeIn 0.3s ease;

  .modal-content {
    width: 100%;
    max-width: 600rpx;
    background-color: white;
    border-radius: 24rpx;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: slideUp 0.3s ease;

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 30rpx;
      border-bottom: none;
      background: linear-gradient(90deg, var(--primary-color) 0%, #ff8c42 100%);
      color: white;

      .modal-title {
        font-size: 36rpx;
        font-weight: bold;
        flex: 1;
        text-align: center;
      }

      .close-btn {
        font-size: 44rpx;
        color: white;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.15);
        transition: all 0.3s ease;
        z-index: 1;
        line-height: 1;

        &:active {
          background-color: rgba(255, 255, 255, 0.25);
          transform: scale(0.9);
        }
      }
    }

    .modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 35rpx;

      image {
        width: 100%;
        height: auto;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
      }

      .detail-content {
        font-size: 28rpx;
        color: var(--text-color);
        line-height: 1.7;
        margin-bottom: 35rpx;
        text-align: justify;
        letter-spacing: 0.5rpx;
      }

      .key-points {
        background-color: #e3f2fd;
        border-radius: 16rpx;
        padding: 25rpx;
        border-left: 6rpx solid #1e88e5;
        margin-bottom: 30rpx;

        .key-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #1e88e5;
          margin-bottom: 20rpx;
          display: flex;
          align-items: center;
        }

        .key-list {
          .key-item {
            font-size: 26rpx;
            color: #555;
            margin-bottom: 15rpx;
            padding-left: 30rpx;
            position: relative;
            line-height: 1.6;

            &:before {
              content: "✓";
              position: absolute;
              left: 0;
              color: #1e88e5;
              font-size: 28rpx;
              font-weight: bold;
            }
          }
        }
      }

      // 实战易错点样式
      .common-mistakes {
        background-color: #fff3e0;
        border-radius: 16rpx;
        padding: 25rpx;
        border-left: 6rpx solid var(--primary-color);
        margin-bottom: 30rpx;

        .mistake-title {
          font-size: 32rpx;
          font-weight: bold;
          color: var(--primary-color);
          margin-bottom: 20rpx;
          display: flex;
          align-items: center;
        }

        .mistake-list {
          .mistake-item {
            font-size: 26rpx;
            color: #555;
            margin-bottom: 15rpx;
            padding-left: 30rpx;
            position: relative;
            line-height: 1.6;

            &:before {
              content: "⚠";
              position: absolute;
              left: 0;
              color: var(--primary-color);
              font-size: 28rpx;
              font-weight: bold;
            }
          }
        }
      }

      // 相关练习链接按钮
      .practice-link-btn {
        background: linear-gradient(
          90deg,
          var(--primary-color) 0%,
          #ff8c42 100%
        );
        color: white;
        font-size: 30rpx;
        font-weight: bold;
        padding: 24rpx;
        border-radius: 16rpx;
        width: 100%;
        box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.2);
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
          box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.15);
        }
      }
    }
  }
}

// 快速试练弹窗样式
.quick-practice-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  padding: 40rpx;
  backdrop-filter: blur(10rpx);
  animation: fadeIn 0.3s ease;

  .modal-content {
    width: 100%;
    max-width: 600rpx;
    background-color: white;
    border-radius: 24rpx;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: slideUp 0.3s ease;

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 30rpx;
      border-bottom: none;
      background: linear-gradient(90deg, var(--primary-color) 0%, #ff8c42 100%);
      color: white;

      .modal-title {
        font-size: 36rpx;
        font-weight: bold;
        flex: 1;
        text-align: center;
      }

      .close-btn {
        font-size: 44rpx;
        color: white;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.15);
        transition: all 0.3s ease;
        z-index: 1;
        line-height: 1;

        &:active {
          background-color: rgba(255, 255, 255, 0.25);
          transform: scale(0.9);
        }
      }
    }

    .modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 35rpx;

      .practice-image {
        margin-bottom: 30rpx;

        image {
          width: 100%;
          height: auto;
          border-radius: 16rpx;
          margin-bottom: 30rpx;
          box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
        }

        .practice-steps {
          .step-title {
            font-size: 30rpx;
            font-weight: bold;
            color: var(--text-color);
            margin-bottom: 20rpx;
            padding-bottom: 10rpx;
            border-bottom: 2rpx solid #eee;
          }

          .step-list {
            .step-item {
              display: flex;
              margin-bottom: 20rpx;
              padding-left: 10rpx;

              .step-number {
                font-size: 26rpx;
                font-weight: bold;
                color: var(--primary-color);
                background-color: var(--primary-light);
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 15rpx;
                flex-shrink: 0;
              }

              .step-content {
                font-size: 26rpx;
                color: var(--secondary-color);
                line-height: 1.6;
                flex: 1;
              }
            }
          }
        }
      }

      .mark-completed-btn {
        background: linear-gradient(90deg, #4caf50 0%, #45a049 100%);
        color: white;
        font-size: 30rpx;
        font-weight: bold;
        padding: 24rpx;
        border-radius: 16rpx;
        width: 100%;
        box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.2);
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
          box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.15);
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30rpx) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

// 美化滚动条
.modal-body::-webkit-scrollbar {
  width: 6rpx;
  background-color: #f5f5f5;
  border-radius: 3rpx;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3rpx;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

// 加载动画
.loading-spinner {
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #1e88e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 动画定义 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 技能详情展开样式 */
.skill-detail-expand {
  background-color: white;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  padding: 30rpx;
  box-shadow: var(--shadow-light);
  animation: slideDown 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 5;
  border-left: 8rpx solid var(--primary-color);
  margin-top: -10rpx;
}

.detail-content-wrapper {
  image {
    width: 100%;
    height: auto;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  }

  .detail-content {
    font-size: 28rpx;
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: 35rpx;
    text-align: justify;
    letter-spacing: 0.5rpx;
  }

  .key-points {
    margin-bottom: 35rpx;

    .key-title {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
      color: var(--primary-color);
      margin-bottom: 20rpx;
    }

    .key-list {
      .key-item {
        font-size: 26rpx;
        color: var(--text-color);
        line-height: 1.6;
        margin-bottom: 15rpx;
        position: relative;
        padding-left: 35rpx;

        &:before {
          content: "•";
          position: absolute;
          left: 15rpx;
          color: var(--primary-color);
          font-size: 20rpx;
          line-height: 1.6;
        }
      }
    }
  }

  .common-mistakes {
    margin-bottom: 35rpx;

    .mistake-title {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
      color: #ff5722;
      margin-bottom: 20rpx;
    }

    .mistake-list {
      .mistake-item {
        font-size: 26rpx;
        color: var(--text-color);
        line-height: 1.6;
        margin-bottom: 15rpx;
        position: relative;
        padding-left: 35rpx;

        &:before {
          content: "⚠";
          position: absolute;
          left: 10rpx;
          font-size: 20rpx;
          line-height: 1.6;
        }
      }
    }
  }

  .practice-link-btn {
    background-color: var(--primary-color);
    color: white;
    font-size: 30rpx;
    font-weight: bold;
    padding: 20rpx 0;
    border-radius: var(--border-radius);
    margin-top: 10rpx;
    box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.2);
    transition: all 0.3s ease;

    &:active {
      background-color: #ff8c42;
      transform: scale(0.98);
      box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.15);
    }
  }
}

// 展开动画
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
